<template>
  <div class="emoji-wrap">
    <div class="emoji-image" :class="emojiClass"></div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  const props = defineProps({
    icon: {
      type: String,
      default: 'good',
    },
    isBig: {
      type: Boolean,
      default: false,
    },
  });
  const emojiClass = computed(() => {
    return `${props.icon}${props.isBig ? '-big' : ''}`;
  });
</script>

<style scoped lang="less">
  .emoji-image {
    width: 100%;
    height: 100%;
    &.Awful {
      background: url('@/assets/img/classroom/commonly.png') center center no-repeat;
      background-size: 100% 100%;
    }
    &.Normal {
      background: url('@/assets/img/classroom/good.png') center center no-repeat;
      background-size: 100% 100%;
    }
    &.Good {
      background: url('@/assets/img/classroom/excellent.png') center center no-repeat;
      background-size: 100% 100%;
    }
    &.Awful-big {
      background: url('@/assets/img/classroom/commonly-big.png') center center no-repeat;
      background-size: 100% 100%;
    }
    &.Normal-big {
      background: url('@/assets/img/classroom/good-big.png') center center no-repeat;
      background-size: 100% 100%;
    }
    &.Good-big {
      background: url('@/assets/img/classroom/excellent-big.png') center center no-repeat;
      background-size: 100% 100%;
    }
  }
</style>
